<template>
  <div class="app-intro">
    <p class="h-title">
      <slot name="left"><span>{{title}}</span></slot>
    </p>
    <p class="h-content">
      <slot name="right"><span>{{content}}</span></slot>
    </p>
    <div class="divider" v-if="!showDevider"></div>
  </div>
</template>
<style lang="less" scoped>
  .app-intro {
    width: 100%;
    font-size:0;
    .h-title, .h-content {
      width: 100%;
      font-size: 0;
      display: inline-block;
      text-align: left;
      span {
        width: 96%;
        text-align:justify;
        display: inline-block;
        font-size: 0.3rem;
        white-space: normal;
      }
    }
    .h-title {
      margin-top: 0.05rem;
      font-weight: bold;
    }
    .h-content {
      margin-top: 0.08rem;
    }
    .divider {
      display: block;
      float: left;
      width: 7.5rem;
      margin-top: 0.05rem;
      margin-left: -0.1rem;
      height: 0.07rem;
      background-color: #eeeeee;
    }
  }

</style>
<script>
  export default {
    data () {
      return {
//        showDevider: true
      }
    },
    props: {
      title: String,
      content: String,
      showDevider: Boolean
    }
  }
</script>
